import React,{ Component } from "react";
import {View, Text, StyleSheet, TouchableOpacity,TextInput,TouchableHighlight} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
let StorageData = require("../utils/Storage");
let Storage = StorageData.storage;
export default class indexData extends Component {
    constructor(props){
        super(props);
        this.state = {
            title:"",
            titleAuto:'',
            count:0,
            HistorySearch:[],
            dataNumberData:[],  //搜索添加的值
            ExhibitionFous:true,  //失去焦点状态呀
        }
    }
    componentWillMount(): void {
        Storage.load({
            key:"dataNumber",
        }).then(res=>{
            if(res==1){
                res = [];
            }
            if(res.length>0){
                this.setState({
                    HistorySearch:res,
                })
            }
        }).catch((error)=>{
            console.log("查询没有数据");
            console.log(error);
        })
    }
    _increaseCount(){
        //读取
        let DataInfo = this.state.title;
        console.log("执行了");
        Storage.load({
            key:"dataNumber",
        }).then(res=>{
            console.log(res);
            if(DataInfo){
                for(var i=0;i<res.length;i++){
                    if(res[i]===DataInfo){
                        return;
                    }
                }
                if(res==1){
                    res = [];
                }
                var tableData = res.concat(DataInfo);
                Storage.save({
                    key:"dataNumber",
                    // expires: 1000 * 60*3,
                    data:tableData,
                });
                this.setState({
                    HistorySearch:tableData,
                });
                DataInfo = [];
            }
        }).catch((error)=>{
            if(DataInfo){
                let ArrayData = [];
                let data = ArrayData.push(DataInfo);
                Storage.save({
                    key:"dataNumber",
                    // expires: 1000 * 60,
                    data:data ,
                });
                console.log("查询没有请添加值，添加数据");
                console.log(error);
                DataInfo = [];
            }
        });
    };
    HistoryExhibition(){   //历史搜索的展示
        let ArrayS = [];
        if(this.state.HistorySearch.length>0){
            this.state.HistorySearch.map((item,index)=>{
                let text = (
                    <TouchableOpacity onPress={()=>{
                        this.setState({
                            title:item
                        })
                    }}>
                        <Text key={ index } style={ styles.ChoiceStyle}>{item}</Text>
                    </TouchableOpacity>
                );
                ArrayS.push(text);
            });
        }
        return ArrayS;
    }
    _closeQk = ()=>{  //清空缓存的数据
        Storage.remove({
            key:"dataNumber",
        });
        this.setState({
            HistorySearch:[],
        })
    };
    containerTop(){
        return (
            <View style={ styles.containerTitle }>
                <View  style={ styles.textInput }>
                    <TextInput
                        ref = { (ref)=>{ this.textInput = ref; } }
                        // multiline = { true }
                        // numberOfLines = { 10 }
                               autoFocus={ true }
                               blurOnSubmit = { true }
                               clearButtonMode = "while-editing"
                               placeholder = "请输入搜索内容"
                               onChangeText = { (text)=>{
                                   this.setState({
                                       title:text,
                                   })
                               }}
                               onFocus = {()=>{
                                   this._onBlur();
                               }}
                               onBlur = {()=>{
                                   this._onFocus();
                               }}
                                onSubmitEditing = {()=>{
                                    this._increaseCount();
                                    this._onFocus();
                                }}
                               defaultValue = { this.state.title }
                    />
                </View>
            </View>
        )
    }
    _onFocus(){  //失去焦点的时候
        this.setState({
            ExhibitionFous:false,
        })
    }
    _onBlur(){  //获取焦点的时候
        this.setState({
            ExhibitionFous:true,
        })
    }
    containerData(){   //历史搜索
        let Array = [];
        if(this.state.ExhibitionFous){
            let textConatiner = (
                <View style={{ flex:1 }}>
                    <View style={ styles.containerTop }>
                        <Text style={ styles.TextTop }>
                            历史搜索
                        </Text>
                        <Icon onPress={this._closeQk} name="ios-close" size={ 35 } color="#999999"></Icon>
                    </View>
                    <View style={ styles.containerMiddle }>
                        { this.HistoryExhibition() }
                    </View>
                </View>
            );
            Array.push(textConatiner);
            return Array;
        }else{
            let text = (
                <View>
                    <Text>
                        展示的内容
                    </Text>
                </View>
            );
            Array.push(text);
            return Array;
        }
    }
    render(){
        return (
            <View style={ styles.container }>
                <View style={ styles.containerTopRow }>
                    <TouchableOpacity onPress={()=>{
                        this.props.navigation.goBack();
                    }}>
                        <Icon  name="ios-arrow-round-back" size={ 35 } color="white"></Icon>
                    </TouchableOpacity>
                    { this.containerTop() }
                    <TouchableOpacity onPress={ ()=>{
                        this.textInput.blur();
                        this._increaseCount();
                    } }>
                        <Text style={{ color:'white' }}>搜索</Text>
                    </TouchableOpacity>
                </View>
                { this.containerData() }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: 'white',
    },
    textInput:{
        height:40,
    },
    containerTitle:{
        backgroundColor:'white',
        // borderBottomColor:'#000000',
        // borderBottomWidth: 1,
        borderRadius:20,
        paddingLeft:10,
        marginRight:20,
        flexDirection:'row',
        justifyContent:'space-between',
        // flex:1,
        width:270,
    },
    TextRight:{
        marginRight:10,
        color:'white',
    },
    containerTop:{
        height:60,
        textAlign:'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding:15,
    },
    TextTop:{
        fontSize:17,
        fontWeight: 'bold',
    },
    containerMiddle:{
        // flex:1,
        padding:20,
        paddingTop:0,
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    ChoiceStyle:{
        padding:10,
        backgroundColor:'#f8f8f8',
        borderRadius: 15,
        color:'#666666',
        marginRight: 10,
        marginBottom: 10
    },
    containerTopRow:{
        // flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center',
        height:60,
        backgroundColor:'#d04542',
    }
})